import React, { useEffect, useState } from "react";
import style from "./style.module.scss";
import { Input, NavBar, DatetimePicker, Field, Button } from "react-vant";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useSetState } from "ahooks";
import { FileState } from "../myIndex";
import { formatTime } from "../../../utils";
import { addUserFile, getUserFiles, updateUserFile } from "../../../api/myApi";

const Index: React.FC = () => {
  const [data, setData] = useSetState({} as FileState);
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const code = searchParams.get("code");

  const getMyFile = async () => {
    const resp = await getUserFiles();
    setData(resp.result[0])
  }
  const handleSubmit = async () => {
    data.treatmentStartTime = formatTime(data.treatmentStartTime, "YYYY-MM-DD");
    data.treatmentEndTime = formatTime(data.treatmentEndTime, "YYYY-MM-DD");
    if (code === "1") {
      // 添加
      await addUserFile(data);
    }
    if (code === "2") {
      // 编辑
      await updateUserFile(data)
    }
    navigate('/my', { replace: true })
  };

  useEffect(() => {
    if(code === '2') getMyFile()
  }, [])

  return (
    <div>
      <NavBar title="添加-编辑" onClickLeft={() => navigate("/my")}></NavBar>
      <div className={style.item}>
        <div className={style.title}>主要病状</div>
        <div>
          <Input
            value={data.diseaseMain}
            onChange={(value) => setData({ diseaseMain: value })}
          ></Input>
        </div>
      </div>
      <div className={style.item}>
        <div className={style.title}>现病史</div>
        <div>
          <Input
            value={data.diseaseNow}
            onChange={(value) => setData({ diseaseNow: value })}
          ></Input>
        </div>
      </div>
      <div className={style.item}>
        <div className={style.title}>既往病史</div>
        <div>
          <Input
            value={data.diseaseBefore}
            onChange={(value) => setData({ diseaseBefore: value })}
          ></Input>
        </div>
      </div>
      <div className={style.item}>
        <div className={style.title}>治疗经历</div>
        <div>
          <Input
            value={data.treatmentHospitalRecent}
            onChange={(value) => setData({ treatmentHospitalRecent: value })}
          ></Input>
        </div>
      </div>
      <div className={style.item}>
        <div className={style.title}>开始治疗时间</div>
        <div>
          <DatetimePicker
            popup={{
              round: true,
            }}
            type="date"
            value={new Date(data.treatmentStartTime)}
            onConfirm={(value: any) => setData({ treatmentStartTime: value })}
          >
            {(val, _, actions) => {
              return (
                <Field
                  readOnly
                  clickable
                  label="选择年月日"
                  value={val.toLocaleDateString()}
                  placeholder="请选择日期"
                  onClick={() => actions.open()}
                />
              );
            }}
          </DatetimePicker>
        </div>
      </div>
      <div className={style.item}>
        <div className={style.title}>结束治疗时间</div>
        <div>
          <DatetimePicker
            popup={{
              round: true,
            }}
            type="date"
            value={new Date(data.treatmentEndTime)}
            onConfirm={(value) => setData({ treatmentEndTime: value })}
          >
            {(val, _, actions) => {
              return (
                <Field
                  readOnly
                  clickable
                  label="选择年月日"
                  value={val.toLocaleDateString()}
                  placeholder="请选择日期"
                  onClick={() => actions.open()}
                />
              );
            }}
          </DatetimePicker>
        </div>
      </div>
      <div className={style.item}>
        <div className={style.title}>治疗过程</div>
        <div>
          <Input
            value={data.treatmentProcess}
            onChange={(value) => setData({ treatmentProcess: value })}
          ></Input>
        </div>
      </div>
      <Button type="primary" block round onClick={() => handleSubmit()}>
        提交
      </Button>
    </div>
  );
};

export default Index;
